<template>
  <view class="comment-list">
    <!-- 关闭按钮（优化位置和交互） -->
   

    <!-- 加载状态（查询用户信息时显示） -->
    <view v-if="isLoading" class="loading-tip">
      <uni-icons type="spinner" size="24" color="#999" spin></uni-icons>
      <text class="loading-text">加载评论中...</text>
    </view>

    <!-- 滚动列表容器（加载完成后显示） -->
    <scroll-view 
      v-else
      scroll-y="true" 
      class="comment-scroll"
      :scroll-with-animation="true"
    >
	 <view class="closebtn" @click.stop="$emit('close')">关闭</view>
      <!-- 空状态提示 -->
      <view v-if="reMsgs.length === 0" class="empty-tip">
        暂无评论，快来抢沙发吧~
      </view>

      <!-- 评论列表（关联用户信息后渲染） -->
      <view 
        v-for="(msg, index) in formattedComments" 
        :key="msg.id || index" 
        class="comment-item"
        :class="{ 'last-item': index === formattedComments.length - 1 }" 
      >
        <!-- 头像（优先用用户信息中的头像） -->
        <view class="avatar-container">
          <image 
            class="avatar" 
            :src="msg.userAvatar || defaultAvatar" 
            mode="widthFix"
            lazy-load  
            @error="handleAvatarError(msg)"  
          ></image>
        </view>

        <!-- 评论内容区域 -->
        <view class="comment-content">
          <!-- 昵称和时间 -->
          <view class="info-bar">
            <text class="nickname">{{ msg.userNickname || '匿名用户' }}</text>
            <text class="time">{{ formatTime(msg.createTime) }}</text>
          </view>

          <!-- 评论内容（支持换行显示） -->
          <view class="content">
            <text>{{ msg.content || '暂无内容' }}</text>
          </view>

          <!-- 评论来源（可选：显示评论对应的消息ID，方便调试） -->
          <view v-if="msg.publicMsgId" class="source-tip">
            来源：消息ID {{ msg.publicMsgId.slice(-6) }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import formatMessageTime from '../utils/formatMessageTime';
const db = uniCloud.databaseForJQL(); // JQL实例，支持多表关联

export default {
  name: "MyReMsg",
  props: {
    reMsgs: {
      type: Array,
      default: () => [] // 评论列表（含sendUserId，用于匹配用户）
    },
    msg: {
      type: Object,
      default: () => {} // 关联的公共消息（可选，用于显示来源）
    }
  },
  data() {
    return {
      defaultAvatar: "/static/nicPic/m1.png", // 默认头像
      isLoading: true, // 加载状态（默认true，避免初始空白）
      userMap: {}, // 存储用户信息映射：{ userId: { nicName, nicPic } }
      formattedComments: [] // 关联用户信息后的最终评论列表
    };
  },
  mounted() {
    console.log('原始评论数据', this.reMsgs);
    // 页面挂载后立即查询用户信息并格式化评论
    this.getuserAndFormatComments();
  },
  methods: {
    /**
     * 1. 查询用户信息 + 2. 关联评论与用户信息
     */
    async getuserAndFormatComments() {
      try {
        // 步骤1：提取评论中的所有用户ID（去重，避免重复查询）
        const userIds = [...new Set(this.reMsgs.map(item => item.sendUserId).filter(id => id))];
        console.log('需查询的用户ID', userIds);

        // 步骤2：查询用户信息（仅查需要的字段，减少数据量）
        let userRes = { data: [] };
        if (userIds.length > 0) {
          userRes = await db.collection('linli-user')
            .where({ userId: db.command.in(userIds) })
            .field({ userId: true, nicName: true, nicPic: true }) // 仅返回必要字段
            .get();
        }
        console.log('查询到的用户信息', userRes.data);

        // 步骤3：构建用户信息映射（userId为key，方便快速匹配）
        this.userMap = userRes.data.reduce((map, user) => {
          map[user.userId] = {
            nicName: user.nicName || '匿名用户',
            nicPicUrl: user.nicPic?.url || '' // 兼容nicPic为空的情况
          };
          return map;
        }, {});

        // 步骤4：关联用户信息到评论列表
        this.formattedComments = this.reMsgs.map(comment => {
          const userInfo = this.userMap[comment.sendUserId] || {};
          return {
            ...comment,
            userNickname: userInfo.nicName, // 关联昵称
            userAvatar: userInfo.nicPicUrl, // 关联头像
            publicMsgId: this.msg._id || '' // 关联评论对应的公共消息ID（可选）
          };
        });
        console.log('关联后的评论数据', this.formattedComments);

      } catch (error) {
        console.error('获取用户信息/格式化评论失败：', error);
        uni.showToast({ title: '评论加载失败', icon: 'error', duration: 1500 });
        // 异常时直接显示原始评论（避免空白）
        this.formattedComments = this.reMsgs.map(comment => ({
          ...comment,
          userNickname: '匿名用户',
          userAvatar: this.defaultAvatar
        }));

      } finally {
        // 无论成功失败，都关闭加载状态
        this.isLoading = false;
      }
    },

    /**
     * 格式化时间（复用外部工具函数）
     */
    formatTime(timestamp) {
      return timestamp ? formatMessageTime(timestamp) : '未知时间';
    },

    /**
     * 头像加载失败时兜底（显示默认头像）
     */
    handleAvatarError(comment) {
      comment.userAvatar = this.defaultAvatar;
    },

    /**
     * 关闭组件（向外触发事件）
     */
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="scss" scoped>
/* 组件外层容器（固定定位，覆盖全屏） */
.comment-list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 120rpx;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明背景，区分主页面 */
  padding: 20rpx;
  box-sizing: border-box;
}

/* 关闭按钮（优化位置和样式） */
.closebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* 绝对定位居中核心：left+transform 组合（兼容所有设备） */
  left: 50%;
  transform: translateX(-50%); /* 向左偏移自身50%，实现水平居中 */
  bottom: 20rpx; /* 距离底部20rpx，替代 margin-bottom */
  width: 220rpx;
  height: 50rpx;
  background-color: #666;
  color: #fff;
  font-size: 26rpx;
  border-radius: 10rpx;
  /* 清除冲突样式：绝对定位下 margin-left: auto 无效，需删除 */
  margin: 0; /* 重置margin，避免干扰定位 */
  transition: background-color 0.2s ease; /* 平滑过渡 */
  z-index: 10; /* 确保按钮在滚动列表上方，不被遮挡 */
}
.closebtn:active {
  background-color: #444; /* 点击时加深颜色 */
}

/* 加载状态（居中显示） */
.loading-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  padding: 50rpx 0;
  color: #999;
  font-size: 26rpx;
}

/* 滚动列表容器（白色背景，居中显示） */
.comment-scroll {
  width: 100%;
  position: relative;
  height: calc(90vh - 70rpx); /* 减去关闭按钮高度 */
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1); /* 轻微阴影，提升层次感 */
}

/* 空状态提示 */
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

/* 评论项样式（横向排列） */
.comment-item {
  display: flex;
  padding: 25rpx 0;
  border-bottom: 1px solid #f5f5f5; /* 浅灰分隔线，更柔和 */
}


/* 头像容器 */
.avatar-container {
  margin-right: 20rpx;
  flex-shrink: 0; /* 避免头像被压缩 */
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  object-fit: cover; /* 确保头像填满容器，不变形 */
}

/* 评论内容区域（占满剩余宽度） */
.comment-content {
  flex: 1;
  overflow: hidden;
}

/* 昵称和时间行 */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}
.nickname {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.time {
  font-size: 22rpx;
  color: #999;
}

/* 评论内容（支持长文本换行） */
.content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8; /* 增加行高，提升可读性 */
  word-break: break-all;
  margin-bottom: 10rpx;
}

/* 评论来源提示（弱化显示） */
.source-tip {
  font-size: 20rpx;
  color: #ccc;
}
</style>